<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>wow.js的使用</title>
    <link rel="stylesheet" href="modelCss/animate.css">
    <link rel="stylesheet" href="modelCss/reset.css">
    <style>
        div {
            width: 100px;
            height: 100px;
            border-radius: 100%;
            text-align: center;
            line-height: 100px;
            margin: 200px auto;
        }

        .box1 {
            background: pink;
        }

        .box2 {
            background: red;
        }

        .box3 {
            background: greenyellow;
        }

        .box4 {
            background: palegoldenrod;
        }

        .box5 {
            background: palegreen;
        }

        .box6 {
            background: paleturquoise;
        }

        .box7 {
            background: palevioletred;
        }

        .box8 {
            background: papayawhip;
        }

        .box9 {
            background: peru;
        }
    </style>
</head>

<body>
    <div class="box1 wow rollIn" data-wow-iteration='3'>box1</div>
    <div class="box2 wow bounceInLeft" data-wow-offset='250' data-wow-delay='2s'>box2</div>
    <div class="box3 wow flipInX" data-wow-offset='250'>box3</div>
    <div class="box4 wow bounceInRight" data-wow-offset='250'>box4</div>
    <div class="box5 wow shake" data-wow-offset='250'>box5</div>
    <div class="box6 wow swing" data-wow-offset='250'>box6</div>
    <div class="box7 wow lightSpeedIn" data-wow-offset='250'>box7</div>
    <div class="box8 wow slideInLeft" data-wow-offset='250'>box8</div>
    <div class="box9 wow bounce" data-wow-offset='250'>box9</div>
</body>

</html>
<!-- <script src="js/wow.js"></script> -->
<script src="js/wowPlus.js"></script>
<script type="text/javascript">
    new WOW().init(); 



    /*
    使用方法：
    1、wow.js依赖于animate.css，首先在头部引用animate.css或者animate.min.css
    2、在最底部引用wow.js或者wow.min.js，然后再下面再写一行javascript代码（无需引用jQuery）
        注意：new WOW().init();中的WOW要大写，否则就没效果了
    3、在css下方js上方写需要动画的元素（必须设置为块状或者行内块状），并添加class类名
        在需要动画的标签上添加.wow 和 你的动画元素即可
        类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。
        后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、
        data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）
        这四个属性可选可不选
        注意：其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，
        而不是距离浏览器窗口底部的位置。
    兼容】
      IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；
      而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。
      为了达到更好的兼容，最好加一个浏览器及版本判断
    4、如果需要自定义配置，可如下使用：
        var wow = new WOW({
            boxClass: 'wow',
            animateClass: 'animated',
            offset: 0,
            mobile: true,
            live: true
        });
        wow.init();
        配置：
        属性/方法	    类型	    默认值	        说明
        boxClass	    字符串	    ‘wow’	        需要执行动画的元素的 class
        animateClass    字符串	    ‘animated’	    animation.css 动画的 class
        offset	        整数	    0	            距离可视区域多少开始执行动画
        mobile	        布尔值	    true	        是否在移动设备上执行动画
        live	        布尔值	    true	        异步加载的内容是否有效
    */
</script>